/*
 * 新增公告
 * @Author: LuoQianJun
 * @Date: 2018-03-31 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2019-06-28 09:16:52
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-admin-equipment-create {
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .equipment-form {
            width: 380px;
        }
        .ivu-radio-group {
            margin: 0 0 10px 4.16666667%;
		}
		.ivu-row-flex-start {
			height: 850px;
		}

    }
   .ivu-form-item{
	   margin-bottom:20px !important;
   }
</style>
<template>
	<div class="v-admin-equipment-create">


		<Row

			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(120,170)"
					name="create-form">

					<!-- 公告名 -->
					<Form-item
						:label="$t('announcement.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('announcement.please_select_name')"
							name="create-name"
							type="text"/>
					</Form-item>

					<!-- 标题 -->
					<Form-item
						:label="$t('announcement.title')"
						prop="title">
						<i-input
							v-model="formValidate.title"
							:placeholder="$t('announcement.please_select_title')"
							name="create-title"
							type="text"/>
					</Form-item>

					<!-- 内容-->
					<Form-item
						:label="$t('announcement.content')"
						prop="content">
						<i-input
							v-model="formValidate.content"
							:placeholder="$t('announcement.please_select_content')"
							name="create-content"
							type="text"

						/>
					</Form-item>


					<!-- 排序 -->
					<Form-item
						:label="$t('announcement.sort_order')"
						prop="sort_order">
						<InputNumber
							:min="1"

							v-model="formValidate.sort_order"
							:placeholder="$t('announcement.please_select_sort_order')"
							name="create-sort"/>
					</Form-item>


					<!-- 开始时间 -->

					<Form-item
						:label="$t('announcement.started_at')"
						prop="started_at">
						<DatePicker
							v-model="formValidate.started_at"
							:style="{width: '260px'}"
							:placeholder="$t('announcement.please_select_started_at')"
							type="datetime"
							placement="top"
							name="create-started_at"
							@on-change="changeSTDate"/>
					</Form-item>

					<!-- 结束时间 -->
					<Form-item
						:label="$t('announcement.ended_at')"
						prop="ended_at">
						<DatePicker
							v-model="formValidate.ended_at"
							:style="{width: '260px'}"
							:placeholder="$t('announcement.please_select_ended_at')"
							type="datetime"
							placement="top"
							name="create-ended_at"
							@on-change="changeEDDate"/>
					</Form-item>


					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>

	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin'; // 引入mixins文件
import { validate } from 'src/validate';
import Uploader from 'src/views/component/uploader';

export default {
	name: 'ManufacturerCreate',

	components: {
		Uploader,
	},
	mixins: [labelWidthMixin],

	props: {
		name: {
			type: String,
			default() {
				return {};
			},
		},
		title: {
			type: String,
			default() {
				return [];
			},
		},
		content: {
			type: String,
			default() {
				return [];
			},
		},
		sort_order: {
			type: Number,
			default() {
				return [];
			},
		},

	},

	data() {
		return {

			formValidate: {
				name: '', // 厂商

			 title: '', // 联系人

			 content: '', // 电话

				sort_order: 1,

				started_at: '',

				ended_at: '',


			},

           	 real_started_at: '', // 格式化后的开始时间


			 real_ended_at: '', // 格式化后的结束时间

			ruleValidate: { // 验证表单数据规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.name') }),
						trigger: 'blur,change',
					},
				],

				title: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.title') }),
						trigger: 'blur,change',
					},
				],

				content: [
					{

						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.content') }),
						trigger: 'blur,change',
					},
				],
				sort_order: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('announcement.sort_order') }),
						trigger: 'blur,change',
					},
				],
				started_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('announcement.started_at') }),
						trigger: 'blur,change',
					},
				],
				ended_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('announcement.ended_at') }),
						trigger: 'blur,change',
					},
				],

			},

		};
	},


	methods: {
		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeSTDate(date) {
			this.real_started_at = date;
		},

		changeEDDate(date) {
			this.real_ended_at = date;
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},


		/**
         * 提交表单
         * @param  {string} name {表单上的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
		 * @param {new_object} {拼接表单对象}
         * @return {undefined}
         */
		formDataCreate() {
			const new_object = {

				name: this.formValidate.name,

				title: this.formValidate.title,

				content: this.formValidate.content,

				sort_order: this.formValidate.sort_order,

				started_at: this.real_started_at,

				ended_at: this.real_ended_at,
			};


			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			this.$emit('postStore', form_data);
			// }
			// else {
			// 	const new_object = {
			// 		deviced_name: this.storeBuyValidate.deviced_name,

			// 		sku: this.storeBuyValidate.sku,

			// 		buyer: this.storeBuyValidate.buyer,

			// 		purchase_at: this.real_date,
			// 	};

			// 	const form_data = new FormData();

			// 	Object.keys(new_object).forEach((key) => {
			// 		form_data.append(key, new_object[key]);
			// 	});

			// 	this.$emit('postStoreBuy', form_data);
			// }
		},


	},
};
</script>
